<template>
    <div class="m-addr">
        <div>
            <span>{{addr.Name || '未设置'}} {{addr.Phone || '无'}} <em v-if="addr.State==0">默认</em></span>
            <p>{{addr.Province || '未选择'}} {{addr.City || '未选择'}} {{addr.Area || '未选择'}} {{addr.Address || ''}}</p>
        </div>
        <img src="@/assets/images/edit@2x.png" alt="" @click="toAddrEdit(addr)">
    </div>
</template>
<script>
import {mapState,mapMutations,mapActions} from 'vuex';
export default {
    name:'',
    props:['addr'],
    data () {
        return {

        }
    },
    methods: {
        ...mapActions(['actionAddrCon']),
        toAddrEdit(addr) {
            this.actionAddrCon(addr);
            this.$router.push({name:'addressEdit'});
        }
    }
}
</script>
<style lang="less" scoped>
.m-addr{
    .flex;
    background: white;
    padding: .8rem;
    margin-bottom: 1px;
    div{
        flex: 1;
        span{
             em{
                 background: @primary-red;
                 color: white;
                 padding: 0 .4rem;
                 .border-radius(10px);
                 font-size: .6rem;
             }
        }
        p{
            font-size: .9rem;
            color: @light-gray;
            margin-top: .6rem;
        }
    }
    img{
        width: 1.4rem;
    }
}
</style>
